<template>
  <div>
    <div class="body">
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        ref="selectUser"
        border>
        <el-table-column label="选择" width="55">
          <template slot-scope="scope">
            <span>
              <input type="checkbox"  :ref="'checkbox-' + scope.$index" :value="scope.row.id" @click="handleCheckboxClick($event,scope.$index)"/>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="人员编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="nameZh"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="deptName"
          label="部门"
          width="180">
        </el-table-column>
      </el-table>
      <v-pagination :pageData.sync="pageData" layout="total, sizes, jumper" @refreshPageData="refreshPageData"></v-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import pagination from '@/views/public/pagination.vue'

export default {
  name: 'select-user',
  components: {
    'v-pagination': pagination
  },
  props: {
    randomKey: {
      type: Number
    },
    checkedUser: {
      type: Array
    }
  },
  data () {
    return {
      tableData: [],
      pageData: {
        page: 1,
        size: 5,
        totalRows: 0
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      api.sysUser.onSelectUserInfoList({}, this.pageData).then(res => {
        this.pageData.totalRows = res.totalRows
        this.tableData = res.content
      })
    },
    handleCheckboxClick (e, idx) {
      // console.log(e.target.checked)
      // console.log(e.target.value)
      for (var i = 0; i < this.tableData.length; i++) {
        if (idx !== i) {
          this.$refs['checkbox-' + i].checked = false
        }
      }
      this.checkedUser.length = 0
      if (e.target.checked) {
        this.checkedUser[0] = this.tableData[idx]
      }
      // this.$forceUpdate()
    },
    refreshPageData () {
      this.getList()
    }
  },
  watch: {
    randomKey () {
      this.pageData.page = 1
      this.getList()
      this.checkedUsers = []
    }
  }
}
</script>

<style lang="scss">
  .body {
    padding: 8px;
  }
</style>
